@charset "utf-8";
@function n($px) {
    @return($px/2);
}

.ty {
    width: 100%;
    height: n(168px);
    .ty_1 {
        a {
            width: n(353px);
            display: inline-block;
            font-size: n(24px);
            color: #323232;
            margin-top: n(37px);
            margin-left: n(29px);
            letter-spacing: n(3px);
        }
    }
    .rt {
        color: #d5d5d5;
        margin-left: n(30px);
        .rt_2 {
            margin-left: n(25px);
        }
    }
    .ty_2 img {
        width: n(210px);
        height: n(117px);
        margin-top: n(32px);
        margin-left: n(32px);
    }
}

.tieku {
    border-bottom: n(1px) solid #e2e2e2;
    width: n(584px);
    vertical-align: middle;
    margin-left: n(27px);
}

.tieku_2 {
    width: 100%;
    height: n(26px);
    background-color: #f5f5f5;
    margin-top: n(16px);
}

.wt {
    width: 100%;
    height: n(207px);
    margin-top: n(35px);
    .wt_1 {
        font-size: n(24px);
        text-align: center;
    }
    .wt_2 {
        text-align: center;
        img {
            width: n(186px);
            height: n(123px);
            margin-top: n(20px);
        }
    }
    .wt_3 {
        color: #c5c5c5;
        .ttf_1 {
            font-size: n(19px);
        }
        .vai {
            margin-left: n(28px);
        }
        .dialog {
            margin-left: n(18px)
        }
        .heart {
            margin-left: n(21px)
        }
        .ttf_2 {
            font-size: n(16px);
        }
        .ttf_3 {
            font-size: n(19px);
            margin-left: n(49px);
        }
        .ttf_4 {
            font-size: n(21px);
        }
    }
}

.news {
    width: 100%;
    height: n(166px);
    .news_1 {
        a {
            width: n(353px);
            display: inline-block;
            font-size: n(24px);
            color: #323232;
            margin-top: n(37px);
            margin-left: n(29px);
            letter-spacing: n(3px);
        }
        .st {
            color: #c5c5c5;
            .st_1 {
                font-size: n(18px);
            }
            .st_2 {
                font-size: n(19px);
            }
            .st_3 {
                font-size: n(21px);
            }
            .heart {
                margin-left: n(29px);
            }
        }
    }
    .news_2 img {
        width: n(210px);
        height: n(122px);
        margin-top: n(35px);
        margin-left: n(25px);
    }
}

.loading {
    border-top: n(1px) solid #e2e2e2;
    width: n(584px);
    height: n(60px);
    vertical-align: middle;
    margin-left: n(27px);
    margin-top: n(32px);
    text-align: center;
    font-size: n(22px);
    color: #bbbbbb;
    line-height: n(60px);
}

.web {
    .popup {
        width: 100%;
        height: 100%;
        background: #222222;
        position: absolute;
        top: 0;
        left: -100%;
        transition: transform .6s ease-in-out;
    }
    #login_control:checked~.login {
        transform: translateX(100%);
    }
    .back {
        width: 100%;
        height: n(30px);
        background: #1d1d1d;
    }
    .enter_logo img {
        width: n(161px);
        height: n(136px);
        position: absolute;
        top: n(162px);
        left: n(248px);
    }
    .wu {
        position: absolute;
        top: n(374px);
        left: n(72px);
        color: #cdcdcd;
        input {
            width: n(433px);
            height: n(53px);
            font-size: n(20px);
            text-indent: n(2em);
            background: #3d3d3d;
            line-height: n(57px);
            border: none;
        }
        img {
            height: n(30px);
            margin: n(11px) n(17px);
        }
        .account {
            font-size: 0;
            .account_1 {
                font-size: n(28px);
                display: inline-block;
                width: n(63px);
                height: n(53px);
                background-color: #303030;
                position: relative;
                top: 9px;
                left: auto;
            }
        }
        .password {
            font-size: 0;
            margin-top: n(16px);
            .password_1 {
                display: inline-block;
                font-size: n(28px);
                width: n(63px);
                height: n(53px);
                background-color: #303030;
                position: relative;
                top: 9px;
                left: auto;
            }
        }
    }
    .forget {
        font-size: n(19.53px);
        position: relative;
        top: n(28px);
        vertical-align: middle;
        text-align: right;
        img {
            width: n(20px);
            height: n(20px);
            display: inline-block;
            margin: auto;
        }
        a {
            color: #d4d4d4;
        }
    }
    .enter {
        margin-top: n(60px);
        span {
            display: inline-block;
            width: n(494px);
            height: n(55px);
            background-color: #b60005;
            font-size: n(23px);
            color: #cdcdcd;
            text-align: center;
            line-height: n(55px);
        }
    }
    .register {
        margin-top: n(14px);
        span {
            display: inline-block;
            width: n(494px);
            height: n(55px);
            background-color: #303030;
            font-size: n(23px);
            color: #cdcdcd;
            text-align: center;
            line-height: n(55px);
        }
        span:active {
            border: 1px solid #b60005;
        }
    }
}

.web {
    .person {
        width: 100%;
        height: 100%;
        background: #222222;
        position: absolute;
        top: 0;
        left: -100%;
        transition: transform .6s ease-in-out;
    }
    #person_control:checked~.person {
        transform: translateX(100%);
    }
    .cl {
        position: relative;
        top: n(20px);
        left: n(12px);
        display: inline-block;
        label {
            width: n(50px);
            height: n(50px);
            display: inline-block;
            border-radius: 50%;
            background-color: red;
            line-height: n(50px);
            text-align: center;
            img {
                width: n(23px);
                height: n(23px);
            }
        }
        .ccoo{
            display: inline-block;
            input {
                width: n(513px);
                height: n(54px);
                border-radius: 12px;
                font-size: n(26px);
                text-indent:3em;
                background:#1f1f1f;
            }
            img{
                width:n(27px);
                height:n(27px);
                position: relative;
                top:n(5px);
                left:n(54px);
            }
        }
    }
    .line{
        border-bottom:1px solid #484848;
        width:n(611px);
        margin:17px auto;
    }
    .Photo{
        width:n(640px);
        height:n(113px);
        text-align: center;
        img{
            width:n(130px);
            height:n(131px);
        }
    }
    .fs{
        text-align: center;
        margin-top:16px;
        color:#d7d7d7;
        .fs_1{
            font-size:n(25px);
        }
        .fs_2{
            border:1px solid #cdcdcd;
            width: n(94px);
            height:n(20px);
            font-size:n(14px);
        }
    }
    .stars{
      margin-top:n(8px);
      text-align:center;
    }
    .popularity{
        font-size:n(23px);
        text-align: center;
        margin-top:n(13px);
        .popularity_1{
            color:#ffffff;
        }
        .popularity_2{
            color: #b60005;
            margin-left:10px;
        }
        .popularity_3{
            margin-left:9px;
            img{
                height:n(22px);
            }
        }
        .popularity_4{
           color:#ffffff;
           margin-left:13px;
        }
    }
    .ti{
        color:#ffffff;
        font-size:n(23px);
        text-align: center;
        margin-top:n(21px);
        a{
           width:n(219px);
           height:n(54px);
           display: inline-block;
        }
        .ti_1{
            background:#b60005;
            border-radius: 30px;
            line-height:n(54px);
            display:inline-block;   
        }
        .ti_2{
            background:#b60005;
            border-radius:30px;
            line-height:n(54px);
            margin-left:n(23px);
            display:inline-block; 
        }
    }
    .tieku_3{
        width:100%;
        height:n(24px);
        background:#303030;
        margin-top:n(19px);
    }
    .gimc{
        width:100%;
        height:n(95px);
        border-bottom-width:n(580px);
        border-style:solid red;
        
    }
    .logoff{
         text-align: center;
        label{
            width:n(180px);
            height: n(51px);
            border-radius:30px;
            display: inline-block;
            background-color: red;
            font-size:n(23px);
            letter-spacing:n(15px);
            color: #ecbbbc;
            line-height:n(51px);
        }
    } 
}